import React from 'react'
import ReactDOM from 'react-dom'
import {HashRouter as Router, Route, NavLink, Switch} from 'react-router-dom'

function One() {
    return(
       <div>
           <h2>One</h2>
       </div>
    )
}

function Two() {
    return(
       <div>
           <h2>Two</h2>
       </div>
    )
}

function Three() {
    return(
       <div>
           <h2>Three</h2>
       </div>
    )
}

class App extends React.Component{
    render() {
        return (
            <Router>
            <div>
                {/* <Switch> */}
                <Route path='/' exact component={One}></Route>
                <Route path='/two' component={Two}></Route>
                <Route path='/three' component={Three}></Route>
                {/* </Switch> */}
                <ul>
                    <li>
                        <NavLink to='/' activeStyle={{color: 'red'}}>One</NavLink></li>
                        <li><NavLink to='/two' activeStyle={{color: 'red'}}>Two</NavLink></li>
                        <li><NavLink to='/three' activeStyle={{color: 'red'}}>Three</NavLink>
                    </li>
                </ul>
            </div>
            </Router>
        )
    }
}

ReactDOM.render(<App/> ,document.getElementById('root'))